﻿@page
@{
    ViewData["Title"] = "编辑/添加用户";
    Layout = "~/Pages/Admin/_Layout.cshtml";
}
<style>
    .organize-tree {
        position: absolute;
        background-color: #fff;
        padding: 5px 25px;
        z-index: 1000;
        box-shadow: 0 0 24px rgba(0, 0, 0, .18);
        opacity: 0;
        height: 0;
        display: none;
    }

        .organize-tree.active {
            display: block;
            opacity: 1;
            height: auto;
            max-height: 500px;
            overflow: auto;
            transition: all .5s;
        }

    .form-cus {
        width: 80%;
        float: right;
    }

    .cur-image {
        width: 15%;
        position: absolute;
        left: 25px;
        top: 0px;
        margin-bottom: 0px;
    }


        .cur-image .add-photo.default {
            height: 170px;
        }

        .cur-image .select-newimg {
            padding-top: 55px;
        }

        .cur-image .add-photo img {
            height: 170px;
        }

    .widget-footer {
        border: 1px solid #f6f9fd !important;
        background-color: #f6f9fd;
        text-align: center;
        color: rgb(163, 175, 183);
    }

        .widget-footer span {
            display: block;
            line-height: 25px;
            color: #333;
        }

    .input-tags {
        border-radius: 3px !important;
        height: 24px;
        border: 1px solid #e6e6e6;
        cursor: pointer;
        padding: 7px 10px;
    }

    .tags {
        padding: 3px 10px;
        background-color: #f0f2f5;
        color: #909399;
        margin-right: 10px;
    }
</style>
<div id="app">
    <ul class="addpic-list cur-image clearfix">
        <li>
            <div class="add-photo default">
                <div class="select-newimg fyt-cloud " :class="m.headPic?'layui-hide':''" data-text="headPic"
                     data-img="imgShow" data-type="form">
                    <i class="icon-addphote"></i>
                    <span>选择组图片</span>
                </div>
                <div class="add-photo-wall" :class="!m.headPic?'layui-hide':''">
                    <img id="imgShow" :src="m.headPic">
                    <div class="phote-edit">
                        <a class="photo-tool fyt-cloud" data-text="headPic" data-img="imgShow" data-type="form"
                           href="javascript:void(0)"><i class="layui-icon layui-icon-edit"></i>更换</a>
                        <a class="photo-tool last" href="javascript:void(0)" onclick="oc.deleteFile()">
                            <i class="layui-icon layui-icon-delete"></i>删除
                        </a>
                    </div>
                    <div class="cover">组图片</div>
                </div>
            </div>
        </li>

        <li class="widget-footer layui-clear layui-hide" id="upLoginDate">上次登录：{{m.upLoginDate}}</li>

    </ul>
    <form class="layui-form form-cus" action="" lay-filter="forms">
        <div class="layui-form-item">
            <label class="layui-form-label">所属部门</label>
            <div class="layui-input-block">
                <input type="text" v-model="m.organizeName" name="DepartmentName" id="DepartmentName"
                       lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="请选择所属部门"
                       class="layui-input">
                <div class="organize-tree">
                    <div id="tree" class="layui-tree-cus"></div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">关联角色</label>
            <div class="layui-input-block">
                <div id="roles" class="xm-select-demo"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">登录账号</label>
            <div class="layui-input-inline">
                <input type="text" v-model="m.userName" name="LoginName" maxlength="20" lay-verify="required"
                       lay-verType="tips" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">登录密码</label>
            <div class="layui-input-inline">
                <input type="password" v-model="m.passWord" name="LoginPwd" maxlength="20" lay-verify="required"
                       lay-verType="tips" class="layui-input">
            </div>
        </div>
       


        <div class="layui-form-item">
           
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" v-model="m.trueName" name="TrueName" maxlength="10" lay-verify="required"
                           lay-verType="tips" class="layui-input">
                </div>
          
                <label class="layui-form-label">居住地址</label>
                <div class="layui-input-inline">
                    <input type="text" v-model="m.adress" name="Number" maxlength="6" lay-verify="required"
                           lay-verType="tips" class="layui-input">
                </div>
           
        </div>
        <div class="layui-form-item">
            
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" value="0" title="男" lay-filter="sex" checked>
                    <input type="radio" name="sex" value="1" title="女" lay-filter="sex">
                </div>
          
          
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <input type="checkbox" name="status" lay-skin="switch" lay-filter="status" checked lay-text="ON|OFF">
                </div>
           
        </div>
        <div class="layui-form-item">
          
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-inline">
                    <input type="text" v-model="m.phone" name="Mobile" autocomplete="off" class="layui-input">
                </div>
        
          
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="email" v-model="m.email" name="Email" autocomplete="off" class="layui-input">
                </div>
         
        </div>
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="email" v-model="m.remarks" name="Email" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item layui-cur-submit">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submit" id="submit">
                    <i class="layui-icon layui-icon-loading  layui-anim layui-anim-rotate layui-anim-loop layui-hide "></i>提 交
                </button>
                <button type="button" class="layui-btn layui-btn-primary btn-open-close">取 消</button>
            </div>
        </div>

    </form>
</div>

    <script>
        var oc,
            vm = new Vue({
                el: '#app',
                data: {
                    m: {organizeName:''}
                }
            });
            layui.use(['layer', 'jquery', 'common', 'form', 'tree'],
            function () {
                var form = layui.form, $ = layui.$, os = layui.common, tree = layui.tree;

                var index = parent.layer.getFrameIndex(window.name);

                form.on('radio(sex)',
                    function (data) {
                        vm.m.sex = data.value;
                    });
                form.on('switch(status)',
                    function (data) {
                        vm.m.status = data.elem.checked == true?1:0;
                    });
                os.cloudFile();

                //下拉框
                var rolesSelect = os.selectRender({
                    el: '#roles',
                    tips: '请选择关联角色'
                   
                });


                oc = {
                    //初始化
                    init() {
                        //更新
                        if (os.getUrlParam('id') != null) {
                            //查看
                            if (os.getUrlParam('opt') == 'show') {
                                $('#upLoginDate').removeClass('layui-hide');
                                $('.layui-cur-submit').addClass('layui-hide');
                            }
                            //查询用户信息
                            os.ajax('api/admin/sysuser/get',
                                { id: os.getUrlParam('id') },
                                function (res) {

                                    if (res.code == 1) {
                                        vm.m = res.data;
                                        vm.$nextTick(function () {
                                            form.val('forms',
                                                {
                                                    'sex': vm.m.sex,
                                                    'status': vm.m.status
                                                });
                                        });
                                    } else {
                                        os.error(res.msg);
                                    }
                                    //加载所有角色下拉列表
                                    rolesSelect.update({
                                        data: res.data.roles
                                    })

                                }, 'get');
                        }
                        //添加
                        else
                        {
                            os.ajax('api/admin/sysrole/list', { size: 1000 }, function (res) {
                                vm.m.roles = res.data.rows;
                                //加载所有角色下拉列表
                                rolesSelect.update({
                                    data: res.data.rows
                                })
                            }, 'get');

                        }
                        //加载组织架构
                        os.ajax('api/admin/sysorganize/gettree',
                            {},
                            function (res) {
                                tree.render({
                                    elem: '#tree',
                                    data: res.data,
                                    onlyIconControl: true,
                                    click: function (obj) {
                                        id = obj.data.id;
                                        vm.m.organizeId = obj.data.id;
                                        vm.m.organizeName = obj.data.title;
                                        $(".organize-tree").removeClass('active');
                                    }
                                });
                            }, 'get');

                    },
                    fileSave(v) {
                        $(".select-newimg").addClass('layui-hide');
                        $(".add-photo-wall").removeClass('layui-hide');
                        vm.m.headPic = v;
                        $('#imgShow').attr('src', v);
                    },
                    deleteFile() {
                        $(".select-newimg").removeClass('layui-hide');
                        $(".add-photo-wall").addClass('layui-hide');
                        $('#imgShow').attr('src', v);
                    }
                   
                };



                oc.init();
                //监听提交
                form.on('submit(submit)',
                    function (data) {
                        $('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
                        var urls = "api/admin/sysuser/add";
                        if (vm.m.id) {
                            urls = "api/admin/sysuser/update";
                        }

                        vm.m.roles = rolesSelect.getValue();
                       
                        os.ajax(urls,
                            vm.m,
                            function (res) {
                                $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                                if (res.code ==1) {
                                    parent.layer.close(index);
                                    //刷新父页面的数据
                                    $('button[data-type="reload"]', window.parent.document).click();
                                } else {
                                    os.error(res.msg);
                                }
                            });
                        return false;
                    });
                //关闭弹窗
                $(".btn-open-close").on('click',
                    function () {
                        parent.layer.close(index);
                    });

                //弹出组织架构树
                $("#DepartmentName").click(function () {
                    $(".organize-tree").addClass('active');
                });


                $(".organize-tree").mouseleave(function () {
                    $(".organize-tree").removeClass('active');
                });
            });
    </script>

    